// index.js
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;

Page({

  data: {
    movies: [],  // 存储当前电影列表
    cid: '1',    // 存储当前类别id
    cityname: '未选择'
  },

  /**
   * 发请求，根据类别id 加载电影列表。
   * @param {number} cid     类别id
   * @param {number} offset  起始位置下标
   * @returns Promise 返回电影列表数据
   */
  loadMovies(cid, offset){
    return new Promise((resolve, reject)=>{
      // 弹出等待框
      wx.showLoading({
        title: '加载中，请稍后...',
        mask: true
      })
      wx.request({
        url: 'https://api.tedu.cn/index.php',
        data: {cid, offset},
        method: 'GET',
        success: (res)=>{
          resolve(res.data);
          wx.hideLoading();  // 隐藏提示框
        }
      })
    })
  },

  /** 当点击顶部导航后触发 */
  tapNav(event){
    let id = event.target.dataset.id;
    this.setData({cid: id});
    // 从缓存中读取数据，若已经存过，则获取后显示即可
    wx.getStorage({
      key: id,
      success: (res)=>{  // 读取到数据后执行
        console.log(res);
        this.setData({
          movies: res.data  // res.data中存储列表
        })
      },
      fail: (err)=>{  // 没有读取到数据
        console.warn(err);
        // 发送http请求，获取响应
        this.loadMovies(id, 0).then(movies=>{
          this.setData({movies});
          // 将获取到的数据，存入缓存
          wx.setStorage({
            key: id,
            data: movies
          })
        })
      }
    })
  },

  /** 加载位置 */
  loadLocation(){
    // 构建qqmapsdk
    qqmapsdk = new QQMapWX({
      key: 'VU7BZ-HWYCU-2IAVJ-47XOI-N5RAS-PYBY6'
    }); 
    qqmapsdk.reverseGeocoder({
      success: (res)=>{
        console.log(res);
        // 输出当前城市名称   更新左上角
        let cityname = res.result.address_component.city;
        console.log(cityname);
        this.setData({cityname});
        // 将cityname存入globaldata
        getApp().globalData.cityname = cityname;
      }
    })
  },

  /** 页面加载时执行  生命周期方法 */
  onLoad() {
    // 加载首页电影信息
    this.loadMovies(1, 0).then(movies=>{
      this.setData({movies});
    })
    // 更新位置
    this.loadLocation();
  },

  /** 生命周期方法，从后台切回前台时执行 */
  onShow(){
    // 从globalData中加载cityname，更新UI
    let cityname = getApp().globalData.cityname;
    this.setData({cityname});
  },

  /** 当滚动到页面底部后，自动调用该方法 */
  onReachBottom(){
    console.log('reachbottom....')
    let cid = this.data.cid;
    let offset = this.data.movies.length;
    this.loadMovies(cid, offset).then(movieslist=>{
      let movies = this.data.movies;
      movies.push(...movieslist);
      this.setData({movies});
    })
  },

  /** 当下拉刷新时执行 */
  onPullDownRefresh(){
    console.log('pull down refresh...');
    // 发送http请求，获取最新列表数据，更新缓存
    this.loadMovies(this.data.cid, 0).then(movies=>{
      this.setData({movies}); // UI列表更新
      wx.stopPullDownRefresh();
      // 更新缓存
      wx.setStorage({
        key: this.data.cid,
        data: movies
      })
    })
  }
})
